Started the styleguide page and updated buttons css
3 changed files with 196 additions and 8 deletions
+ 26
- 8
app/assets/stylesheets/avl2_theme/buttons.less
@@ -2,11 +2,19 @@ |
||
| 2 | 2 |
|
| 3 | 3 |
@import "colors.less"; |
| 4 | 4 |
|
| 5 |
+.btn.btn-primary {
|
|
| 6 |
+ color: @blue; |
|
| 7 |
+ border-color: @blue; |
|
| 8 |
+} |
|
| 9 |
+.btn.btn-primary:hover { background-color: fade(@blue, 25%); }
|
|
| 10 |
+.btn.btn-link.btn-primary:hover { background-color: transparent; text-decoration: underline; }
|
|
| 11 |
+ |
|
| 5 | 12 |
.btn.btn-success {
|
| 6 | 13 |
color: @green; |
| 7 | 14 |
border-color: @green; |
| 8 | 15 |
} |
| 9 | 16 |
.btn.btn-success:hover { background-color: fade(@green, 25%); }
|
| 17 |
+.btn.btn-link.btn-success:hover { background-color: transparent; text-decoration: underline; }
|
|
| 10 | 18 |
|
| 11 | 19 |
.btn.btn-danger {
|
| 12 | 20 |
color: @red; |
@@ -15,11 +23,14 @@ |
||
| 15 | 23 |
.btn.btn-danger:hover { background-color: fade(@red, 25%); }
|
| 16 | 24 |
.btn.btn-link.btn-danger:hover { background-color: transparent; text-decoration: underline; }
|
| 17 | 25 |
|
| 18 |
-.btn.btn-primary {
|
|
| 19 |
- color: @blue; |
|
| 20 |
- border-color: @blue; |
|
| 26 |
+.btn.btn-alert {
|
|
| 27 |
+ color: @yellow; |
|
| 28 |
+ border-color: @yellow; |
|
| 21 | 29 |
} |
| 22 |
-.btn.btn-primary:hover { background-color: fade(@blue, 25%); }
|
|
| 30 |
+.btn.btn-alert:hover { background-color: fade(@yellow, 25%); }
|
|
| 31 |
+.btn.btn-link.btn-alert:hover { background-color: transparent; text-decoration: underline; }
|
|
| 32 |
+ |
|
| 33 |
+ |
|
| 23 | 34 |
|
| 24 | 35 |
.btn {
|
| 25 | 36 |
display: inline-block; |
@@ -43,11 +54,16 @@ |
||
| 43 | 54 |
text-transform: none; |
| 44 | 55 |
} |
| 45 | 56 |
|
| 57 |
+.btn-small {
|
|
| 58 |
+ font-size: 11px; |
|
| 59 |
+} |
|
| 60 |
+ |
|
| 46 | 61 |
.btn-large {
|
| 47 |
- font-family: Avenir-Black; |
|
| 48 |
- font-size: 18px; |
|
| 49 |
- color: #333333; |
|
| 50 |
- line-height: 20px; |
|
| 62 |
+ font-family: Avenir-Black; |
|
| 63 |
+ font-size: 21px; |
|
| 64 |
+ color: #333333; |
|
| 65 |
+ line-height: 20px; |
|
| 66 |
+ padding: 7px 15px 5px 15px; |
|
| 51 | 67 |
} |
| 52 | 68 |
|
| 53 | 69 |
.btn-huge {
|
@@ -61,6 +77,8 @@ |
||
| 61 | 77 |
padding-bottom: 10px; |
| 62 | 78 |
width: 280px; |
| 63 | 79 |
text-transform: uppercase; |
| 80 |
+ margin-top: 10px; |
|
| 81 |
+ margin-bottom: 10px; |
|
| 64 | 82 |
} |
| 65 | 83 |
|
| 66 | 84 |
.btn:hover {
|
+ 4
- 0
app/assets/stylesheets/missions.css.less
@@ -39,6 +39,10 @@ |
||
| 39 | 39 |
background-color: @red; |
| 40 | 40 |
} |
| 41 | 41 |
|
| 42 |
+.status-canceled {
|
|
| 43 |
+ background-color: @yellow; |
|
| 44 |
+} |
|
| 45 |
+ |
|
| 42 | 46 |
.mission-counter {
|
| 43 | 47 |
font-family: Avenir-Medium; |
| 44 | 48 |
font-size: 18px; |
+ 166
- 0
public/styleguide.html
@@ -0,0 +1,166 @@ |
||
| 1 |
+<!DOCTYPE html> |
|
| 2 |
+<html lang="en"> |
|
| 3 |
+<head> |
|
| 4 |
+ <meta charset="utf-8"> |
|
| 5 |
+ <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> |
|
| 6 |
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
| 7 |
+ <title></title> |
|
| 8 |
+ <meta content="authenticity_token" name="csrf-param"> |
|
| 9 |
+ <meta content="dk5vPU6n/mDtA2sWAqQ0Ux4Rh8inxTlp/HYiJtGGjxI=" name="csrf-token"> |
|
| 10 |
+ |
|
| 11 |
+ <!-- Le HTML5 shim, for IE6-8 support of HTML elements --> |
|
| 12 |
+ <!--[if lt IE 9]> |
|
| 13 |
+ <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js" type="text/javascript"></script> |
|
| 14 |
+ <![endif]--> |
|
| 15 |
+ |
|
| 16 |
+ <link href="/assets/application.css?body=1" media="all" rel="stylesheet"> |
|
| 17 |
+ <link href="/assets/flatstrap/bootstrap.css?body=1" media="all" rel="stylesheet"> |
|
| 18 |
+ <link href="/assets/font-awesome.css?body=1" media="all" rel="stylesheet"> |
|
| 19 |
+ <link href="/assets/rails_bootstrap_forms.css?body=1" media="all" rel="stylesheet"> |
|
| 20 |
+ <link href="/assets/bootstrap3-switch.css?body=1" media="all" rel="stylesheet"> |
|
| 21 |
+ <link href="/assets/jasny-bootstrap.css?body=1" media="all" rel="stylesheet"> |
|
| 22 |
+ <link href="/assets/jasny-bootstrap-responsive.css?body=1" media="all" rel="stylesheet"> |
|
| 23 |
+ <link href="/assets/summernote.css?body=1" media="all" rel="stylesheet"> |
|
| 24 |
+ <link href="/assets/admin_panel.css?body=1" media="all" rel="stylesheet"> |
|
| 25 |
+ <link href="/assets/agents.css?body=1" media="all" rel="stylesheet"> |
|
| 26 |
+ <link href="/assets/avalanche_icons.css?body=1" media="all" rel="stylesheet"> |
|
| 27 |
+ <link href="/assets/avalanche_theme.css?body=1" media="all" rel="stylesheet"> |
|
| 28 |
+ <link href="/assets/avl2_theme/buttons.css?body=1" media="all" rel="stylesheet"> |
|
| 29 |
+ <link href="/assets/avl2_theme/colors.css?body=1" media="all" rel="stylesheet"> |
|
| 30 |
+ <link href="/assets/avl2_theme/cover.css?body=1" media="all" rel="stylesheet"> |
|
| 31 |
+ <link href="/assets/avl2_theme/footer.css?body=1" media="all" rel="stylesheet"> |
|
| 32 |
+ <link href="/assets/avl2_theme/forms.css?body=1" media="all" rel="stylesheet"> |
|
| 33 |
+ <link href="/assets/avl2_theme/panel.css?body=1" media="all" rel="stylesheet"> |
|
| 34 |
+ <link href="/assets/avl2_theme/typography.css?body=1" media="all" rel="stylesheet"> |
|
| 35 |
+ <link href="/assets/blog_posts.css?body=1" media="all" rel="stylesheet"> |
|
| 36 |
+ <link href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet"> |
|
| 37 |
+ <link href="/assets/checkbox.css?body=1" media="all" rel="stylesheet"> |
|
| 38 |
+ <link href="/assets/dashboard.css?body=1" media="all" rel="stylesheet"> |
|
| 39 |
+ <link href="/assets/mission_editor.css?body=1" media="all" rel="stylesheet"> |
|
| 40 |
+ <link href="/assets/missions.css?body=1" media="all" rel="stylesheet"> |
|
| 41 |
+ <link href="/assets/start.css?body=1" media="all" rel="stylesheet"> |
|
| 42 |
+ <link href="/assets/subscription.css?body=1" media="all" rel="stylesheet"> |
|
| 43 |
+ <link href="/assets/uploads.css?body=1" media="all" rel="stylesheet"> |
|
| 44 |
+ |
|
| 45 |
+ <!-- For third-generation iPad with high-resolution Retina display: --> |
|
| 46 |
+ <!-- Size should be 144 x 144 pixels --> |
|
| 47 |
+ <link href="/images/apple-touch-icon-144x144-precomposed.png" rel="apple-touch-icon-precomposed" sizes="144x144" type="image/png"> |
|
| 48 |
+ |
|
| 49 |
+ <!-- For iPhone with high-resolution Retina display: --> |
|
| 50 |
+ <!-- Size should be 114 x 114 pixels --> |
|
| 51 |
+ <link href="/images/apple-touch-icon-114x114-precomposed.png" rel="apple-touch-icon-precomposed" sizes="114x114" type="image/png"> |
|
| 52 |
+ |
|
| 53 |
+ <!-- For first- and second-generation iPad: --> |
|
| 54 |
+ <!-- Size should be 72 x 72 pixels --> |
|
| 55 |
+ <link href="/images/apple-touch-icon-72x72-precomposed.png" rel="apple-touch-icon-precomposed" sizes="72x72" type="image/png"> |
|
| 56 |
+ |
|
| 57 |
+ <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> |
|
| 58 |
+ <!-- Size should be 57 x 57 pixels --> |
|
| 59 |
+ <link href="/images/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed" type="image/png"> |
|
| 60 |
+ |
|
| 61 |
+ <!-- For all other devices --> |
|
| 62 |
+ <!-- Size should be 32 x 32 pixels --> |
|
| 63 |
+ <link href="/assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon"> |
|
| 64 |
+ |
|
| 65 |
+ <script type="text/javascript" async="" src="https://ssl.google-analytics.com/ga.js"></script> |
|
| 66 |
+ <script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script> |
|
| 67 |
+ <script src="/assets/jquery.js?body=1"></script> |
|
| 68 |
+ <script src="/assets/jquery.turbolinks.js?body=1"></script> |
|
| 69 |
+ <script src="/assets/jquery_ujs.js?body=1"></script> |
|
| 70 |
+ <script src="/assets/jquery-ui/core.js?body=1"></script> |
|
| 71 |
+ <script src="/assets/jquery-ui/widget.js?body=1"></script> |
|
| 72 |
+ <script src="/assets/jquery-ui/mouse.js?body=1"></script> |
|
| 73 |
+ <script src="/assets/jquery-ui/sortable.js?body=1"></script> |
|
| 74 |
+ <script src="/assets/twitter/bootstrap/bootstrap-transition.js?body=1"></script> |
|
| 75 |
+ <script src="/assets/twitter/bootstrap/bootstrap-alert.js?body=1"></script> |
|
| 76 |
+ <script src="/assets/twitter/bootstrap/bootstrap-modal.js?body=1"></script> |
|
| 77 |
+ <script src="/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1"></script> |
|
| 78 |
+ <script src="/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1"></script> |
|
| 79 |
+ <script src="/assets/twitter/bootstrap/bootstrap-tab.js?body=1"></script> |
|
| 80 |
+ <script src="/assets/twitter/bootstrap/bootstrap-tooltip.js?body=1"></script> |
|
| 81 |
+ <script src="/assets/twitter/bootstrap/bootstrap-popover.js?body=1"></script> |
|
| 82 |
+ <script src="/assets/twitter/bootstrap/bootstrap-button.js?body=1"></script> |
|
| 83 |
+ <script src="/assets/twitter/bootstrap/bootstrap-collapse.js?body=1"></script> |
|
| 84 |
+ <script src="/assets/twitter/bootstrap/bootstrap-carousel.js?body=1"></script> |
|
| 85 |
+ <script src="/assets/twitter/bootstrap/bootstrap-typeahead.js?body=1"></script> |
|
| 86 |
+ <script src="/assets/twitter/bootstrap/bootstrap-affix.js?body=1"></script> |
|
| 87 |
+ <script src="/assets/twitter/bootstrap.js?body=1"></script> |
|
| 88 |
+ <script src="/assets/bootstrap-switch.js?body=1"></script> |
|
| 89 |
+ <script src="/assets/jasny-bootstrap.js?body=1"></script> |
|
| 90 |
+ <script src="/assets/summernote.js?body=1"></script> |
|
| 91 |
+ <script src="/assets/turbolinks.js?body=1"></script> |
|
| 92 |
+ <script src="/assets/google_analytics.js?body=1"></script> |
|
| 93 |
+ <script src="/assets/jquery_nested_form.js?body=1"></script> |
|
| 94 |
+ <script src="/assets/admin_panel.js?body=1"></script> |
|
| 95 |
+ <script src="/assets/agents.js?body=1"></script> |
|
| 96 |
+ <script src="/assets/blog_posts.js?body=1"></script> |
|
| 97 |
+ <script src="/assets/bootstrap.js?body=1"></script> |
|
| 98 |
+ <script src="/assets/contact_messages.js?body=1"></script> |
|
| 99 |
+ <script src="/assets/mission_editor.js?body=1"></script> |
|
| 100 |
+ <script src="/assets/missions.js?body=1"></script> |
|
| 101 |
+ <script src="/assets/start.js?body=1"></script> |
|
| 102 |
+ <script src="/assets/subscription.js?body=1"></script> |
|
| 103 |
+ <script src="/assets/uploads.js?body=1"></script> |
|
| 104 |
+ <script src="/assets/application.js?body=1"></script> |
|
| 105 |
+</head> |
|
| 106 |
+<body> |
|
| 107 |
+ |
|
| 108 |
+<div class="container top-container"> |
|
| 109 |
+ <div class="row"> |
|
| 110 |
+ <div class="span12"> |
|
| 111 |
+ <div class="centered"> |
|
| 112 |
+ <h3>Buttons</h3> |
|
| 113 |
+ </div> |
|
| 114 |
+ <div class="centered" style="margin-top: 25px;"> |
|
| 115 |
+ <a href="#" class="btn btn-small">Default</a> |
|
| 116 |
+ <a href="#" class="btn btn-small btn-primary">Primary</a> |
|
| 117 |
+ <a href="#" class="btn btn-small btn-success">Success</a> |
|
| 118 |
+ <a href="#" class="btn btn-small btn-danger">Danger</a> |
|
| 119 |
+ <a href="#" class="btn btn-small btn-alert">Alert</a> |
|
| 120 |
+ </div> |
|
| 121 |
+ <div class="centered" style="margin-top: 25px;"> |
|
| 122 |
+ <a href="#" class="btn">Default</a> |
|
| 123 |
+ <a href="#" class="btn btn-primary">Primary</a> |
|
| 124 |
+ <a href="#" class="btn btn-success">Success</a> |
|
| 125 |
+ <a href="#" class="btn btn-danger">Danger</a> |
|
| 126 |
+ <a href="#" class="btn btn-alert">Alert</a> |
|
| 127 |
+ </div> |
|
| 128 |
+ <div class="centered" style="margin-top: 25px;"> |
|
| 129 |
+ <a href="#" class="btn btn-large">Default</a> |
|
| 130 |
+ <a href="#" class="btn btn-large btn-primary">Primary</a> |
|
| 131 |
+ <a href="#" class="btn btn-large btn-success">Success</a> |
|
| 132 |
+ <a href="#" class="btn btn-large btn-danger">Danger</a> |
|
| 133 |
+ <a href="#" class="btn btn-large btn-alert">Alert</a> |
|
| 134 |
+ </div> |
|
| 135 |
+ <div class="centered" style="margin-top: 25px;"> |
|
| 136 |
+ <a href="#" class="btn btn-huge">Default</a> |
|
| 137 |
+ <a href="#" class="btn btn-huge btn-primary">Primary</a> |
|
| 138 |
+ <a href="#" class="btn btn-huge btn-success">Success</a><br> |
|
| 139 |
+ <a href="#" class="btn btn-huge btn-danger">Danger</a> |
|
| 140 |
+ <a href="#" class="btn btn-huge btn-alert">Alert</a> |
|
| 141 |
+ </div> |
|
| 142 |
+ <div class="centered" style="margin-top: 25px;"> |
|
| 143 |
+ <a href="#" class="btn btn-link">Default</a> |
|
| 144 |
+ <a href="#" class="btn btn-link btn-primary">Primary</a> |
|
| 145 |
+ <a href="#" class="btn btn-link btn-success">Success</a> |
|
| 146 |
+ <a href="#" class="btn btn-link btn-danger">Danger</a> |
|
| 147 |
+ <a href="#" class="btn btn-link btn-alert">Alert</a> |
|
| 148 |
+ </div> |
|
| 149 |
+ </div> |
|
| 150 |
+ </div> |
|
| 151 |
+ <div class="row" style="margin-top: 55px;" > |
|
| 152 |
+ <div class="span12"> |
|
| 153 |
+ <div class="centered" ><h3>Mission Status</h3></div> |
|
| 154 |
+ <div class="centered" style="width: 525px; margin-top: 25px;"> |
|
| 155 |
+ <div style="margin-left: 10px; margin-right: 10px;" class="mission-status pull-right status-canceled">Canceled</div> |
|
| 156 |
+ <div style="margin-left: 10px; margin-right: 10px;" class="mission-status pull-right status-failed">Failed</div> |
|
| 157 |
+ <div style="margin-left: 10px; margin-right: 10px;" class="mission-status pull-right status-completed">Completed</div> |
|
| 158 |
+ <div style="margin-left: 10px; margin-right: 10px;" class="mission-status pull-right status-launched">Launched</div> |
|
| 159 |
+ <div style="margin-left: 10px; margin-right: 10px;" class="mission-status pull-right status-planning">Planning</div> |
|
| 160 |
+ </div> |
|
| 161 |
+ </div> |
|
| 162 |
+ </div> |
|
| 163 |
+</div> |
|
| 164 |
+ |
|
| 165 |
+</body> |
|
| 166 |
+</html> |